<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <title>影厅信息管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap-icons.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/style.css">
</head>

<body class="app sidebar-mini">
<!-- Navbar-->
<header th:replace="_fregments :: header" class="app-header"><a class="app-header__logo" href="index.html">挚夕影院</a>
    <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar"
                                    aria-label="Hide Sidebar"></a>
    <!-- Navbar Right Menu-->
    <ul class="app-nav">
        <li class="app-search">
            <input class="app-search__input" type="search" placeholder="Search">
            <button class="app-search__button"><i class="bi bi-search"></i></button>
        </li>

        <!-- User Menu-->
        <li class="dropdown"><a class="app-nav__item" href="#" data-bs-toggle="dropdown" aria-label="Open Profile Menu"><i
                class="bi bi-person fs-4"></i></a>
            <ul class="dropdown-menu settings-menu dropdown-menu-right">
                <li><a class="dropdown-item" href="page-user.html"><i class="bi bi-gear me-2 fs-5"></i> 设置</a></li>
                <li><a class="dropdown-item" href="page-login.html"><i class="bi bi-box-arrow-right me-2 fs-5"></i> 登出</a>
                </li>
            </ul>
        </li>
    </ul>
</header>
<!-- Sidebar menu-->
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside th:replace="_fregments :: menu(3, 1)" class="app-sidebar">
    <div class="app-sidebar__user"><img class="app-sidebar__user-avatar" src="../../static/images/me.jpg"
                                        alt="User Image">
        <div>
            <p class="app-sidebar__user-name">Dylan</p>
            <p class="app-sidebar__user-designation">Backend Developer</p>
        </div>
    </div>
    <ul class="app-menu">
        <!-- 仪表盘 -->
        <li>
            <a class="app-menu__item" href="../index.html">
                <i class="app-menu__icon bi bi-speedometer"></i>
                <span class="app-menu__label">仪表盘</span>
            </a>
        </li>
        <!-- 影院管理 -->
        <li class="treeview">
            <a class="app-menu__item " href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-house"></i>
                <span class="app-menu__label">影院管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item " href="../cinema/cinema_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../cinema/cinema_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item " href="../cinema/cinema_brand.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院品牌管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 电影管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-camera-reels"></i>
                <span class="app-menu__label">电影管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../movie/movie_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_comment.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影评论管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_age.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影年代管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影类别管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_runtime.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影播放时段管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 影厅管理 -->
        <li class="treeview is-expanded">
            <a class="app-menu__item active" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bank"></i>
                <span class="app-menu__label">影厅管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item active" href="../hall/hall_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../hall/hall_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅类别管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 场次管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bell"></i>
                <span class="app-menu__label">场次管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../session/session_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        场次信息管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 演员管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-people"></i>
                <span class="app-menu__label">演员管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../actor/actor_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../actor/actor_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员角色管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 用户管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-person"></i>
                <span class="app-menu__label">用户管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../user/user_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_order.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        订单信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户角色管理
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</aside>
<main class="app-content">

    <!-- Modal 开始-->
    <div class="modal fade" id="hallModal" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel1">添加影厅</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="modalSelectCinemaName" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>影院名称</label>
                        <div class="col-sm-9">
                            <select id="modalSelectCinemaName" class="form-select" aria-label="Default select example">
                                <option th:each="cinema : ${cinemas}" th:value="${cinema.id}"
                                        th:text="${cinema.name}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputHallName" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>影厅名称</label>
                        <div class="col-sm-9">
                            <input class="form-control" type="text" id="modalInputHallName">
                            <input class="form-control" type="hidden" id="modalInputHallId">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalSelectMovieHallTypeName" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>影厅分类</label>
                        <div class="col-sm-9">
                            <select class="form-select" aria-label="Default select example"
                                    id="modalSelectMovieHallTypeName">
                                <option th:each="hall : ${hallTypes}" th:value="${hall.id}" th:text="${hall.name}">
                                    杜比全景声厅
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputHallRowNumber" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>排数</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" id="modalInputHallRowNumber">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputHallColumnNumber" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>每排座位数</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" id="modalInputHallColumnNumber">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" id="saveHallBtn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div><!-- Modal 结束-->

    <!-- 座位 Modal 开始-->
    <div class="modal modal-lg fade" id="movieManagementModal" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" th:fragment="seatData">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">安排座位</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 提示 -->
                    <div class="seat-example m-child-align-center">
                        <span class="seat seat-default"></span>
                        <span style="margin: 0 20px">启用</span>
                        <span class="seat seat-sold"></span>
                        <span style="margin: 0 20px">禁用</span>
                        <input type="hidden" th:value="${hallId}" id="movieManagementModalId">
                        <input type="hidden" th:value="${row}" id="movieManagementModalRow">
                        <input type="hidden" th:value="${col}" id="movieManagementModalCol">
                    </div>
                    <div class="seat-content m-mt">
                        <!-- 一行开始 -->
                        <div th:each="row, state : ${seat}" class="layui-row">
                            <div style="width:20px; display: inline-block;" th:text="${state.count}">1</div>
                            <div class="m-tac" style="display: inline-block;">
                                <span th:each="val, state2 : ${row}" th:data-row="${state.index}"
                                      th:data-col="${state2.index}" class="seat"
                                      th:classappend="${val == 0} ? 'seat-default' : 'seat-sold'"></span>
                            </div>
                        </div><!-- 一行结束 -->
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" id="saveSeatBtn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div><!-- Modal 结束-->
    <div class="app-title">
        <div>
            <h1><i class="bi bi-speedometer"></i> 影厅信息管理</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="bi bi-house-door fs-6"></i></li>
            <li class="breadcrumb-item"><a th:href="@{/hall/info}">影厅管理</a></li>
            <li class="breadcrumb-item">影厅信息管理</li>
        </ul>
    </div>
    <!-- 查询条件 -->
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-3">
            <select class="form-select" id="selectCinemaName" aria-label="Default select example">
                <option selected value="0">请选择影院名称</option>
                <option th:each="cinema : ${cinemas}" th:value="${cinema.id}" th:text="${cinema.name}">万达影城</option>
            </select>
        </div>
        <div class="col-md-3">
            <select class="form-select" id="selectMovieHallTypeName" aria-label="Default select example">
                <option selected value="0">请选择影厅分类</option>
                <option th:each="type : ${hallTypes}" th:value="${type.id}" th:text="${type.name}">激光厅</option>
            </select>
        </div>
        <div class="col-md-3">
            <select class="form-select" id="selectMovieHallState" aria-label="Default select example">
                <option selected value="-1">请选择影厅状态</option>
                <option value="1">启用</option>
                <option value="0">禁用</option>
            </select>
        </div>
        <div class="col-md-3">
            <button type="button" id="searchBtn" class="btn btn-success">搜索</button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#hallModal"
                    data-id="0">添加影厅
            </button>
            <button type="button" id="deleteAllBtn" class="btn btn-danger">批量删除</button>
        </div>
    </div>
    <div id="table-container">
        <div th:fragment="hallList">
            <div class="row">
                <div>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th scope="col">
                                <input class="form-check-input" type="checkbox" id="checkAll">
                            </th>
                            <th scope="col">
                                影院名称
                            </th>
                            <th scope="col">
                                影厅名称
                            </th>
                            <th scope="col">
                                影厅类型
                            </th>
                            <th scope="col">
                                行数
                            </th>
                            <th scope="col">
                                行座位数
                            </th>
                            <th scope="col">
                                影厅状态
                            </th>
                            <th scope="col">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="hall : ${hallPage.records}">
                            <th scope="row">
                                <input th:value="${hall.id}" class="form-check-input deleteCheck" type="checkbox">
                            </th>
                            <td th:text="${hall.cinema.name}">万达影城</td>
                            <td th:text="${hall.name}">1号激光厅</td>
                            <td th:text="${hall.hallType.name}">激光厅</td>
                            <td th:text="${hall.rowNums}">10</td>
                            <td th:text="${hall.seatNumsRow}">10</td>
                            <td>
                                <div class="form-check form-switch">
                                    <input th:data-id="${hall.id}" th:checked="${hall.hallState}"
                                           class="form-check-input hallStateSwitch"
                                           type="checkbox" role="switch">
                                </div>
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary updateBtn" data-bs-toggle="modal"
                                        data-bs-target="#hallModal" th:data-id="${hall.id}">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                                <button type="button" class="btn btn-danger deleteBtn" th:data-id="${hall.id}">
                                    <i class="bi bi-trash"></i>
                                </button>
                                <button type="button" class="btn btn-success" data-bs-target="#movieManagementModal"
                                        data-bs-toggle="modal" th:data-id="${hall.id}">
                                    <i class="bi bi-gear"></i>
                                </button>

                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>

            </div>
            <!--分页条-->
            <div class="row">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${!hallPage.hasPrevious()} ? 'disabled'">
                            <a th:data-pageNo="${hallPage.current - 1}" class="page-link">上一页</a>
                        </li>
                        <!-- 最多显示五个页码按钮-->
                        <!-- 小于等于5页，全部显示-->
                        <th:block th:if="${hallPage.getPages() <= 5}">
                            <!--考虑一页都没有的情况-->
                            <th:block th:if="${hallPage.getPages() > 0}">
                                <li th:each="i : ${#numbers.sequence(1,hallPage.getPages())}" class="page-item">
                                    <a class="page-link" th:classappend="${i == hallPage.current} ? 'active'"
                                       th:data-pageNo="${i}" th:text="${i}"></a>
                                </li>
                            </th:block>
                        </th:block>
                        <!-- 大于5页，分情况-->
                        <th:block th:if="${hallPage.getPages() > 5}">
                            <!-- 后面有两页及以上-->
                            <th:block th:if="${hallPage.getPages() >= hallPage.current + 2}">
                                <!-- no < 3 不居中-->
                                <th:block th:if="${hallPage.current < 3}">
                                    <li th:each="i : ${#numbers.sequence(1, 5)}" class="page-item">
                                        <a class="page-link" th:classappend="${i == hallPage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </li>
                                </th:block>
                                <!-- 大于2可居中-->
                                <th:block th:if="${hallPage.current >= 3}">
                                    <li th:each="i : ${#numbers.sequence(hallPage.current - 2, hallPage.current + 2)}"
                                        class="page-item" th:classappend="${hallPage.current == i} ? 'active'">
                                        <a class="page-link"
                                           th:classappend="${i == hallPage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </li>
                                </th:block>
                            </th:block>
                            <!-- 当前页码后面不足两页-->
                            <th:block th:if="${hallPage.getPages() < hallPage.current + 2}">
                                <li th:each="i : ${#numbers.sequence(hallPage.getPages() - 4, hallPage.getPages())}"
                                    class="page-item" th:classappend="${hallPage.current == i} ? 'active'">
                                    <a class="page-link"
                                       th:classappend="${i == hallPage.current} ? 'active'"
                                       th:data-pageNo="${i}" th:text="${i}"></a>
                                </li>
                            </th:block>
                        </th:block>
                        <li class="page-item" th:classappend="${!hallPage.hasNext()} ? 'disabled'">
                            <a th:data-pageNo="${hallPage.current + 1}" class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

</main>
<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../../static/js/jquery-3.7.0.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/main.js"></script>
<!--/*/</th:block>/*/-->


<script type="text/javascript">
    function clearMovieModalInput() {
        $("#modalInputHallId").val('')
        $("#modalSelectCinemaName").val($("#modalSelectCinemaName:first-child").val())
        $("#modalSelectMovieHallTypeName").val($("#modalSelectMovieHallTypeName:first-child").val())
        $("#modalInputHallName").val('')
        $("#modalInputHallRowNumber").val('')
        $("#modalInputHallColumnNumber").val('')
    }

    function page(pageNo) {
        //收集参数
        var cinemaId = $("#selectCinemaName").val()
        if (cinemaId == 0) { //未选中搜索条件
            cinemaId = null
        }
        var hallTypeId = $("#selectMovieHallTypeName").val()
        if (hallTypeId == 0) { //未选中搜索条件
            hallTypeId = null
        }
        var hallState = $("#selectMovieHallState").val()
        if (hallState == -1) { //未选中搜索条件
            hallState = null
        }
        //加载数据
        $("#table-container").load(/*[[@{/hall/info/search}]]*/"/hall/info/search", {
            pageNo: pageNo,
            pageSize: 10,
            cinemaId: cinemaId,
            hallTypeId: hallTypeId,
            hallState: hallState
        });
    }

    $(function () {
        //全选
        $("#table-container").on('click', '#checkAll', function () {
            $(".deleteCheck").prop("checked", this.checked);
        });
        $("#table-container").on('click', '.deleteCheck', function () {
            $("#checkAll").prop("checked",
                $(".deleteCheck").length == $(".deleteCheck:checked").length);
        });
        //分页条按钮点击事件
        $("#table-container").on('click', '.page-link', function () {
            var pageNo = $(this).data('pageno')
            page(pageNo)
        })
        const hallModal = document.getElementById('hallModal')
        hallModal.addEventListener('show.bs.modal', event => {
            // Button that triggered the modal
            const button = event.relatedTarget
            // Extract info from data-bs-* attributes
            const id = button.getAttribute('data-id')
            // If necessary, you could initiate an AJAX request here
            // and then do the updating in a callback.
            //
            const modalTitle = hallModal.querySelector('.modal-title')
            if (id != '0') { //修改
                modalTitle.textContent = '修改影厅'
                $.ajax({
                    url: '[[@{/hall/info/}]]' + id,
                    type: 'get',
                    success: function (response) {
                        if (response.status == 'success') {
                            var hall = response.data;
                            $("#modalInputHallId").val(hall.id)
                            $("#modalSelectCinemaName").val(hall.cinemaId)
                            $("#modalSelectMovieHallTypeName").val(hall.hallTypeId)
                            $("#modalInputHallName").val(hall.name)
                            $("#modalInputHallRowNumber").val(hall.rowNums)
                            $("#modalInputHallColumnNumber").val(hall.seatNumsRow)
                        }
                    }
                })
            } else {
                modalTitle.textContent = '添加影厅'
                clearMovieModalInput()
            }
        })
        //保存
        $("#saveHallBtn").click(function () {
            var id = $("#modalInputHallId").val()
            var cinemaId = $("#modalSelectCinemaName").val()
            var hallTypeId = $("#modalSelectMovieHallTypeName").val()
            var name = $("#modalInputHallName").val()
            var rowNums = $("#modalInputHallRowNumber").val()
            var seatNumsRow = $("#modalInputHallColumnNumber").val()
            $.ajax({
                url: '[[@{/hall/info}]]',
                type: id ? 'put' : 'post',
                data: {
                    id: id,
                    cinemaId: cinemaId,
                    hallTypeId: hallTypeId,
                    name: name,
                    rowNums: rowNums,
                    seatNumsRow: seatNumsRow
                },
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        $("#hallModal").modal('hide')
                        page(1)
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
        //删除
        $("#table-container").on('click', '.deleteBtn', function () {
            var id = $(this).data('id');
            $.ajax({
                url: '[[@{/hall/info/}]]' + id,
                type: 'delete',
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        page(1)
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
        //修改影厅状态
        $("#table-container").on('click', '.hallStateSwitch', function () {
            //影厅id
            var id = $(this).data('id')
            //影厅状态
            var hallState = $(this).prop('checked')
            if (hallState) {
                hallState = 1
            } else {
                hallState = 0
            }
            $.ajax({
                url: '[[@{/hall/info/state}]]',
                type: 'put',
                data: {
                    id: id,
                    hallState: hallState
                },
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })

        //批量删除
        $("#deleteAllBtn").click(function () {
            var hallIds = $(".deleteCheck:checked")
            if (hallIds.length == 0) {
                swal('请勾选要删除的电影')
                return
            }
            var ids = ''
            $.each(hallIds, function () {
                ids += 'id=' + this.value + '&'
            })
            ids = ids.substring(0, ids.length - 1)
            swal("确认删除选中吗?", {
                buttons: ["取消", "确认"],
            }).then((value) => {
                // 点击取消 value=null
                // 点击确认 value=true
                if (value) {
                    $.ajax({
                        url: '[[@{/hall/info}]]',
                        type: 'delete',
                        data: ids,
                        success: function (response) {
                            if (response.status == 'success') {
                                //加载表格数据
                                page(1)
                                swal(response.data);
                            } else {
                                swal(response.data.errorMessage)
                            }
                        },
                        error: function (response) {
                            swal(response.responseText)
                        }
                    })
                }
            });
        })
        //搜索
        $("#searchBtn").click(function () {
            page(1)
        })

        //以下是安排座位模态框部分

        //查看座位
        const movieManagementModal = document.getElementById('movieManagementModal')
        movieManagementModal.addEventListener('show.bs.modal', event => {
            const button = event.relatedTarget
            const id = button.getAttribute('data-id')
            if (id != '0') { //修改
                //加载座位数据
                $("#movieManagementModal").load(/*[[@{/hall/info/seat}]]*/"/hall/info/seat", {
                    id: id
                });
            }
        })
        //选座事件
        $("#movieManagementModal").on('click', '.seat', function () {
            $(this).toggleClass('seat-default')
            $(this).toggleClass('seat-sold')
        })

        //保存座位
        $("#movieManagementModal").on('click', '#saveSeatBtn', function () {
            var row = $("#movieManagementModalRow").val()
            var col = $("#movieManagementModalCol").val()
            var id = $("#movieManagementModalId").val()
            var seat = []
            for (let i = 0; i < row; i++) {
                let arr = []
                //表示可用
                for (let j = 0; j < col; j++) {
                    arr.push(0)
                }
                seat.push(arr)
            }
            var seats = $(".seat-content .seat-sold")
            //标记已选
            $.each(seats, function (){
                let r = $(this).data('row')
                let c = $(this).data('col')
                seat[r][c] = 1
            })
            let jsonStr = JSON.stringify(seat)
            console.log(jsonStr)
            $.ajax({
                url: '[[@{/hall/info/saveSeat}]]',
                type: 'put',
                data: {
                    id: id,
                    seatState: jsonStr
                },
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        $("#movieManagementModal").modal('hide')
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
    });

</script>
</body>

</html>